<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="" style="height: 60px;" >
			<view class="flex margin-top-lg align-center justify-start" >
				<view class="margin-top-xs margin-left-sm" @click="navBack()">
					<uni-icons type="icon-fanhui3"></uni-icons>
				</view>
				<view class="margin-top-xs" style="width: 450upx;">
					<SearchBar radius="20" opacity="0.60" @confirm="searchProduct" placeholder="搜索店内商品"/>
				</view>
			</view>
		</view>
		
		<view class="info-top flex "  >
			<!-- 可能会导致小程序分别 -->
			<image class="bg" src="../../static/shop-bg.jpg"></image>	
			<view class="flex justify-between" style="width: 100%;">
				<view class="head_l flex margin-left-sm margin-top-xs">
					<view class="" >
						<image :src="shop.avatar" mode="widthFix" style="width: 100upx;border-radius: 10upx;box-shadow: 0 0 4upx #ffffff;" v-if="shop.avatar!==undefined"></image>
					</view>
					<view class="margin-left-xs">
						<view class="">
							<text class="text-white text-blod text-sm margin-right-xs">{{shop.shop_name}}</text>
							<uni-icons type="icon-fanhui2" style="color: #FFFFFF;"></uni-icons>
						</view>
						<text class="text-white text-xs">{{shop.shop_desc}}</text>
					</view>
				</view>
				<view class="head_r margin-right-sm ">
					<view class="cu-btn"  :class="{ active: favorite }" style="border-radius: 50upx;" @tap="toFavorite" >					
						<text v-if="favorite==true">已关注</text>
						<text v-else>关注</text>
					</view>
					
				</view>
			</view>
	
		</view>
		
		<Draw :prizeList="prizeList"></Draw>
		<!-- 商品集没数据 -->
		<view  v-if="shopList.length==0"  style="height: 100%;">	
				<home :shopdata="shop" ></home>
		</view>
		
		<!-- 商品集有数据 -->
		<view v-else >
			
			<view class="navbar">
			    <!-- <view
			    	class="nav-item" 
			    	@click="gotuindex"
			    >
			    	首页
			    </view> -->
				<view 
					v-for="(item, index) in navList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="tabClick(index)"
				>
					{{item.text}}
				</view>
			</view>
			 <scroll-view
			 style="height: 1000upx;background-color: #fcfcfc; "
			 	class="list-scroll-content " 
			 	scroll-y
			 	@scrolltolower="tabClick(3)"
			  >
			 <view class="goods" v-for="(item,index) in newsList" :key="index" @click="Togoodsinfo(item)">
			            <image :src="item.cover_img" mode=""></image>
			            <view style="flex: 1;">
			                <view>{{item.title}}</view>
			                <view class="describe">{{item.desc}}</view>
			                <view class="money">价格：{{item.goods_price}} 可抵扣购物积分：{{item.goods_coin}}</view>
			            </view>
			           
			       </view>
			 <uni-load-more :status="loadingType"></uni-load-more>     
			</scroll-view>
		</view>
		<!-- 底部操作栏 -->
		<view class="cu-bar  bg-white ">
			<view class="flex justify-around" style="width: 100%;">
				<view class="flex flex-direction align-center" @tap="navTo(0)">
					<uni-icons type="icon-shouyexianxing" ></uni-icons>
					<text class="text-xs">首页</text>
				</view>
				<view class="flex flex-direction align-center" @tap="navTo(1)">
					<uni-icons type="icon-suoyoufenlei" ></uni-icons>
					<text class="text-xs">分类</text>
				</view>
				<view class="flex flex-direction align-center" @tap="navTo(2)">
					<uni-icons type="icon-gouwuche" ></uni-icons>
					<text class="text-xs">购物车</text>
				</view>
				<view class="flex flex-direction align-center"  @tap="CustomerService">
					<uni-icons type="icon-kefu1"></uni-icons>
					<text class="text-xs">客服</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import uniIcons from '../../ed-icons/ed-icons.vue'	
	import { getOne,postOne,getList,msg} from '../../api/publicapi.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
    import home from '../../components/home/home.vue'
	import SearchBar from '../../components/search-bar/search-bar.vue'
	import Draw from '../../components/draw/draw.vue'
	var _self, page = 1;
	export default {
		components: {
			uniIcons,
			//注册组件        
			uniLoadMore,
			home,
			SearchBar,
			Draw
		},
		data() {
			return {
                tabCurrentIndex: 0,
				shopid: 0,
				shop: {},
				total: [],
				newsList: [],
				loadingType: 'more',
                navList: [{
                		state: 0,
                		text: '商品集',
                		Type: 'tenant',
                	},
                	{
                		state: 1,
                		text: '公共区',
                		Type: 'public',
                    
                	},
                ],
				activitylist:[],
				// 商品集
				shopList:[],
				favorite: false,
				prizeList:[]

			}
		},
        onShow() {
         if(!this.getToken()){
                uni.showModal({
                    title: '提示',
                    content: '您尚未登录是否前去登录',
                    success: function (res) {
                        if (res.confirm) {
                            let url = '/pages/public/warrant';
                            uni.navigateTo({  
                            	url
                            })
                           
                        } else if (res.cancel) {
                           
                        }
                    }
                })
				
            }else{
                 _self.bindtenant()
            }
		
        },
		async onLoad(options) {	
			this.shopid = options.id
			_self = this
			page = 1
		this.getshop()
		// await this.getShopTitle()	
		this.isShopList()
		this.getFavorite()
		this.gethome()
		},
		methods: {
			// 上拉加载
            bindtenant(){
                getOne('front/bindtenant',{tenant_id:this.shopid}).then(res => {
                    if(res.data.id !==undefined ){
                        this.$api.msg(res.message)
                    }
                })
            },
            gotuindex(){
                uni.switchTab({
                        url: '/pages/index/index'
                    })
            },

            
			onReachBottom: function() {
				if (_self.loadingType != 0) { //loadingType!=0;直接返回
					return false;
				}
				this.getshop()
			},
             getToken() {
            	let token = uni.getStorageSync('token')
            	if (token) {
            		token = JSON.parse(token)
            		
            		if ((token.get_time + token.token_expire) < (Date.parse(new Date()) / 1000)) {
            			return false
            		}
            		return true
            	} else {
            		return false
            	}
            },
			getshop() {
				_self.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				let data = {
					'tenant_id': _self.shopid,
					'page': page
				}
				getOne('front/cms/shop', data).then(res => {
					// 店铺信息
					this.shop =  Object.assign(res.data.tenant , res.data.tenant.user );
                    console.log('getshop',this.shop)
					this.total = res.data.shop.total
                    let list = res.data.shop.data
                        if(list.length>0){
                            for (var i = 0; i < list.length; i++) {
                            	_self.newsList.push(list[i]); //将数据拼接在一起
                            }
                            page++;
                        }
					if(res.per_page*res.last_page < res.total){
					    this.loadingType = 'more'
					}else{
					      this.loadingType = 'noMore';
					}
					uni.hideNavigationBarLoading(); //关闭加载动画
				})
				 
				
			},

			// 商品详情
			Togoodsinfo(val){
				let id = val.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
            tabClick(index){
                if(index == 3){
                     
                     if(this.navList[this.tabCurrentIndex].Type === 'tenant'){
    
                          this.getshop()
                      }
                      if(  this.navList[this.tabCurrentIndex].Type === 'public'){
                    
                         this.getpublic()
                      
                     }
                       return
                }
                if( this.tabCurrentIndex != index   ){
                   
                        this.tabCurrentIndex = index;
                   
                    if(this.navList[this.tabCurrentIndex].Type === 'tenant'){
                        page = 1
                        _self.newsList = []
                        this.loadingType = 'more';
                        this.getshop()
                    }
                    if(  this.navList[this.tabCurrentIndex].Type === 'public'){
                       page = 1
                       _self.newsList = []
                        this.loadingType = 'more';
                       this.getpublic()             
                   }                  
                }          
            },
            getpublic(){
                if(this.loadingType === 'loading' || this.loadingType === 'noMore' ){
                	//防止重复加载
                	return;
                }
                uni.showNavigationBarLoading(); //显示加载动画
                this.loadingType = 'loading';
                getOne('front/home/private',{page:page,type:'minipayment'}).then(res => {
                    let  orderList = res.data
                    console.log(orderList.data)
                      if(orderList.data.length>0){
                          page += 1
                          for (var i = 0; i < orderList.data.length; i++) {
                             _self.newsList.push(orderList.data [i]) 
                          }

                      }
                       if(res.data.per_page*res.data.current_page < res.data.total){
                           this.loadingType = 'more'
                       }else{
                             this.loadingType = 'noMore';
                       }
                      uni.hideNavigationBarLoading(); //关闭加载动画
                })
            },
			gethome() {	
				getList('front/home').then(res => {
					this.prizeList = res.data.prize.data
					this.activitylist = res.data.activity	
				})
			},
			//获取商家店铺名 
			// getShopTitle(){
			// 	console.log('getShopTitle',Object.assign(this.shop))
			// 	console.log(this.shop.shop_name)
			// 	uni.setNavigationBarTitle({
			// 		title:this.shop.shop_name
			// 	})
			// },
			navBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 底部操作栏跳转
			navTo(index){
				switch(index){
					case 0:
						uni.switchTab({
							url:'/pages/index/index'
						})
						break;
					case 1:
						uni.switchTab({
							url:'/pages/category/category'
						})
						break;
					case 2:
						uni.switchTab({
							url:'/pages/cart/cart'
						})
						break;	
				}
			},
			// 客服
			CustomerService(){
				let phone=this.shop.shop_phone
				uni.showModal({
					title:'提示',
					content:`您要拨打的电话是${phone}`,
					confirmColor:'#FF0000',
					success:()=>{
						uni.makePhoneCall({
							phoneNumber:phone,
							success:(success)=>{
								console.log(res)
							}
						})
						
					}
				})
			},
			// 判断商品集是否为空
			isShopList(){
				this.shopList=this.newsList
			},
			//收藏
			toFavorite() {
				let id=this.shop.id
				console.log('toFavorite',id)
				this.favorite = !this.favorite
			    let data={
			        id:id,
			        tag:'tenant'
			    }		    
			    postOne('front/collection',data).then(res => {
			            msg(res.message)
			            
			    })
			}
			,
			getFavorite() {
				console.log('getFavorite',this.shopid)
				let data = {
					id: this.shopid,
					tag: 'tenant'
				}
				getOne('front/collection/getconlle', data).then(res => {
					console.log(res)
					if (res.data.id !== undefined) {
						this.favorite = true;
					}
				})
			},
			// 商铺内部商品集搜索
			searchProduct(res){
				let title=res.value
				let data={
					tenant_id: this.shopid,
					title:title
				}
				getOne('front/cms/shop',data).then(res=>{
					console.log(res)
					this.newsList=res.data.shop.data
				})
				
			}
			
		}

	}
</script>

<style lang='scss'>
	/* 头部 */
	.info-top {
		/* background-image: '/static/user-bg.jpg'; */
		/* background-image: url('../../static/user-bg.jpg'); */
		/* background-image: linear-gradient(180deg,#1e2022,#52616b, #c9d6df); */
		height: 200upx;
		display: flex;
		justify-content: space-between;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 380upx;
			filter: blur(1px);
			filter: brightness(0.6);
			opacity: .8;
			z-index: -1;

		}
		.top-img {
			width: 160upx;
			float: left;
			padding-bottom: 50upx;
			image {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
			}
		}

		.top-text {
			padding-left: 25upx;
			float: left;
			width: 70%;

			.text-o {
				font-size: 40upx;
				display: block;
				padding-top: 6upx;
				padding-bottom: 12upx;
			}

			.text-dp {
				display: block;
				font-size: 30upx;
				color: #636363;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}

	}
    .navbar{
    	display: flex;
    	height: 40px;
    	padding: 0 5px;
    	background: #fff;
    	box-shadow: 0 1px 5px rgba(0,0,0,.06);
    	position: relative;
    	z-index: 10;
        width: 100%;
    	.nav-item{
    		flex: 1;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		height: 100%;
    		font-size: 15px;
    		color: $font-color-dark;
    		position: relative;
    		&.current{
    			color: $base-color;
    			&:after{
    				content: '';
    				position: absolute;
    				left: 50%;
    				bottom: 0;
    				transform: translateX(-50%);
    				width: 44px;
    				height: 0;
    				border-bottom: 2px solid $base-color;
    			}
    		}
    	}
    }
    .goods{
    	display: flex;
    	flex-direction: row;
    	flex-wrap: nowrap;
    	justify-content: flex-start;
    	align-items: center;
    	align-content: center;
    	margin-bottom: 10rpx;
    	padding: 10px;
        background-color: #fff;
    	&>image{
    		width: 150rpx;
    		height: 150rpx;
    		margin-right: 16rpx;
    	}
    	
    	.describe{
    		font-size: 24rpx;
    		color: #999;
    	}
    	
    	.money{
    		font-size: 24rpx;
    		color: #E04B28;
    	}
        .buttom{
            width: 120rpx;
            height: 50rpx;
            background-color: rgba(255,255,255,0);
            font-size: 30rpx;
            line-height: 50rpx;
            color: #fa436a;
            border: 1px #fa436a solid;

        }
       
    }


	.guess-box{
		display: flex;
		justify-content: space-between;
		height: 100%;
		background-color: #000000;
		width: 100%;
	}
	.card{
		width: 40%;
		background-color: #007AFF;
	}
	.cu-bar{
		width: 100%;
		position: fixed;
		bottom: 0upx;
		opacity: 0.9;
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
	}
	
	.cu-btn{
		background-image: linear-gradient(45deg, #f43f3b, #ec008c);
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30upx;
		font-size: 28upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
		color: #FFFFFF;
			&.active{
				background-image:unset;
				border: 1upx solid #3B4144;
				color:#3B4144;
			}
	}
</style>